<script setup>
import priorityImg from '@/assets/priority.png'
import couponImg from '@/assets/coupon.png'
import onDiscountImg from '@/assets/on-discount.png'
import regularImg from '@/assets/regular.png'
import realityImg from '@/assets/reality.png'

const dataItems = [
  { img: priorityImg, alt: 'priority', label: '权益' },
  { img: couponImg, alt: 'coupon', label: '优惠券' },
  { img: onDiscountImg, alt: 'on-discount', label: '促销' },
  { img: regularImg, alt: 'regular', label: '常态化' },
  { img: realityImg, alt: 'reality', label: '引流到店' },
]
</script>

<template>
  <div class="bottom-top-header">
    <div class="bottom-header-tittle">
      <img src="@/assets/place-big.png" alt="" />
      <span class="tittle">场</span>
      <span class="tittle-content">-营销活动配置</span>
    </div>
    <div class="bottom-header-button">
      <div><span>按店推荐</span></div>
    </div>
  </div>

  <div class="bottom-top-body">
    <div class="bottom-top-body-button">
      <el-button-group>
        <el-button type="primary" size="small">活动</el-button>
        <el-button size="small">互动</el-button>
        <el-button size="small">内容</el-button>
      </el-button-group>
    </div>
    <div class="bottom-top-body-data">
      <div class="bottom-top-data" v-for="(item, index) in dataItems" :key="index">
        <img :src="item.img" :alt="item.alt" />
        <div><span>{{ item.label }}</span></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .bottom-top-header{
  flex: 2;
  display: flex;
  .bottom-header-tittle{
    flex: 3;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    img{
      width: 25px;
      height: auto;
    }
  }
 }
.bottom-header-button{
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    div{
        display: flex;
        text-align: center;
        span{
          height: 40px;
          width: 60px;
          line-height: 20px;
          background-image: url('@/assets/矩形 13.png');
          background-size: contain;
          background-repeat: no-repeat;
          align-items: center;
          color: #fff;
          font-size: 10px;
          font-weight: bold;
          margin-left: 70px;
        }
    }
}
.bottom-top-body{
   flex: 9;
   display: flex;
   flex-direction: column;
   .bottom-top-body-button{
      flex: 1;
      display: flex;
      justify-content: center;
      .el-button-group{
       margin-top: 10px;
      }
   }
   .bottom-top-body-data{
      flex: 2;
      width: 80%;
      margin-left: 10%;
      display: flex;
      gap: 10px;
      .bottom-top-data{
       flex: 1;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       img{
         height: 40px;
         width: auto;
       }
       div{
         font-size: 12px;
         margin-top: 5px;
       }
      }
   }
}
.tittle{
  font-size: 18px;
  margin-left: 8px;
  font-weight: bold;
}
.tittle-content{
  font-size: 14px;
  font-weight: bold;
  color: rgba(10, 31, 55, 1);
  margin-left: 6px;
  background-image: url('@/assets/tittle-content.png');
  background-repeat: repeat-x;
  padding-bottom: 0;
  background-position: left bottom;
}
.data-name{
  font-size: 12px;
  color: rgba(10, 31, 55, 0.6);
}
.data-value{ 
  font-size: 20px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: bolder;
  margin-top: 5px;
}
</style>
